<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue学习01</title>
<!--    引入vue-->
    <script type="application/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>{{title}}</h1>
    <h1 v-text="title"></h1>

    <button @click="fun01">不准点</button>
    <br>
    <input v-model="inputText" placeholder="请输入内容">

    <button @click="fun02">获取</button>

    <ul>
        <li v-for="item in list">{{item}}</li>
    </ul>

<!--    使用v-if-->
    <button v-on:click="flag = !flag">按吧</button>
    <h1 v-if="flag">点点看</h1>

    <h1 v-show="!flag">月圆之夜</h1>

</div>

<script>
    //创建vue实例
    let app = new Vue({
        //挂载点  #app 找到ID为app的元素
        el:"#app",
        //定义变量的区域
        data() {
            return {
                //定义变量 键值对 键 变量名字 值
                title: "vue学习开始",
                //输入框的内容
                inputText:"",
                list:["苹果","香蕉","草莓","蓝莓"],

                flag:true,
            }
        },
        //定义方法的区域  vmethod
        methods: {
            //name() 定义一个名字为name的方法
            fun01(){
                console.log("1235")
                alert("方法1执行")
            },
            fun02(){
                //在方法中调用变量 使用this
                //this.inputText
                alert(this.inputText)
            }
        },


    })

</script>
</body>
</html>